<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店客房清扫APP原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        .screen {
            width: 360px;
            height: 640px;
            overflow: hidden;
            position: relative;
            border: 10px solid #222;
            border-radius: 36px;
            margin: 20px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }
        .status-bar {
            height: 24px;
            background-color: #f8f8f8;
            display: flex;
            justify-content: space-between;
            padding: 0 12px;
            align-items: center;
            font-size: 12px;
        }
        .nav-bar {
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            background-color: white;
            border-bottom: 1px solid #eee;
        }
        .tab-bar {
            height: 60px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: white;
            border-top: 1px solid #eee;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
        }
        .content {
            height: calc(100% - 134px);
            overflow-y: auto;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body class="bg-gray-100 p-4">
    <div class="max-w-6xl mx-auto">
        <h1 class="text-3xl font-bold text-center my-8">酒店客房清扫APP原型</h1>
        
        <div class="flex flex-wrap justify-center">
            <!-- 登录页面 -->
            <div class="screen bg-white">
                <div class="status-bar">
                    <span>9:41</span>
                    <div>
                        <span>📶</span>
                        <span>📡</span>
                        <span>🔋</span>
                    </div>
                </div>
                <div class="h-full flex flex-col items-center justify-center bg-blue-50 p-8">
                    <div class="w-24 h-24 bg-blue-600 rounded-full flex items-center justify-center mb-8">
                        <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                    </div>
                    <h1 class="text-2xl font-bold text-gray-800 mb-8">客房清扫管理</h1>
                    <div class="w-full space-y-4">
                        <div class="bg-white rounded-lg p-3 shadow">
                            <input type="text" placeholder="员工ID" class="w-full p-2 border-b border-gray-300 focus:outline-none focus:border-blue-500">
                        </div>
                        <div class="bg-white rounded-lg p-3 shadow">
                            <input type="password" placeholder="密码" class="w-full p-2 border-b border-gray-300 focus:outline-none focus:border-blue-500">
                        </div>
                        <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium shadow-lg">
                            登录
                        </button>
                        <div class="text-center text-sm text-gray-500">
                            <a href="#" class="text-blue-600">忘记密码?</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 主页/任务列表 -->
            <div class="screen bg-white">
                <div class="status-bar">
                    <span>9:41</span>
                    <div>
                        <span>📶</span>
                        <span>📡</span>
                        <span>🔋</span>
                    </div>
                </div>
                <div class="nav-bar">
                    <div class="text-lg font-semibold">今日任务</div>
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center text-white mr-2">3</div>
                        <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                        </svg>
                    </div>
                </div>
                <div class="content p-4">
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="flex justify-between items-center mb-2">
                            <div class="text-sm text-gray-500">今日进度</div>
                            <div class="text-sm font-medium">3/8 房间</div>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div class="bg-blue-600 h-2.5 rounded-full" style="width: 38%"></div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="flex justify-between items-center mb-3">
                            <div class="font-medium">待清扫房间</div>
                            <div class="text-sm text-blue-600">查看全部</div>
                        </div>
                        
                        <div class="space-y-3">
                            <div class="flex items-center p-3 bg-yellow-50 rounded-lg border-l-4 border-yellow-500">
                                <div class="flex-1">
                                    <div class="font-medium">房间 305</div>
                                    <div class="text-sm text-gray-500">标准双人间 | 优先级: 高</div>
                                </div>
                                <div class="bg-yellow-500 text-white text-xs font-medium px-2 py-1 rounded">待清扫</div>
                            </div>
                            
                            <div class="flex items-center p-3 bg-yellow-50 rounded-lg border-l-4 border-yellow-500">
                                <div class="flex-1">
                                    <div class="font-medium">房间 412</div>
                                    <div class="text-sm text-gray-500">豪华套房 | 优先级: 中</div>
                                </div>
                                <div class="bg-yellow-500 text-white text-xs font-medium px-2 py-1 rounded">待清扫</div>
                            </div>
                            
                            <div class="flex items-center p-3 bg-yellow-50 rounded-lg border-l-4 border-yellow-500">
                                <div class="flex-1">
                                    <div class="font-medium">房间 208</div>
                                    <div class="text-sm text-gray-500">标准单人间 | 优先级: 中</div>
                                </div>
                                <div class="bg-yellow-500 text-white text-xs font-medium px-2 py-1 rounded">待清扫</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="flex justify-between items-center mb-3">
                            <div class="font-medium">已完成房间</div>
                            <div class="text-sm text-blue-600">查看全部</div>
                        </div>
                        
                        <div class="space-y-3">
                            <div class="flex items-center p-3 bg-green-50 rounded-lg border-l-4 border-green-500">
                                <div class="flex-1">
                                    <div class="font-medium">房间 201</div>
                                    <div class="text-sm text-gray-500">标准双人间 | 10:15 完成</div>
                                </div>
                                <div class="bg-green-500 text-white text-xs font-medium px-2 py-1 rounded">已完成</div>
                            </div>
                            
                            <div class="flex items-center p-3 bg-green-50 rounded-lg border-l-4 border-green-500">
                                <div class="flex-1">
                                    <div class="font-medium">房间 302</div>
                                    <div class="text-sm text-gray-500">标准单人间 | 09:30 完成</div>
                                </div>
                                <div class="bg-green-500 text-white text-xs font-medium px-2 py-1 rounded">已完成</div>
                            </div>
                            
                            <div class="flex items-center p-3 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                                <div class="flex-1">
                                    <div class="font-medium">房间 107</div>
                                    <div class="text-sm text-gray-500">标准双人间 | 08:45 完成</div>
                                </div>
                                <div class="bg-blue-500 text-white text-xs font-medium px-2 py-1 rounded">待检查</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-bar">
                    <div class="tab-item text-blue-600">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
                        </svg>
                        <span>首页</span>
                    </div>
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                        </svg>
                        <span>任务</span>
                    </div>
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                        </svg>
                        <span>消息</span>
                    </div>
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        <span>我的</span>
                    </div>
                </div>
            </div>
            
            <!-- 房间详情页 -->
            <div class="screen bg-white">
                <div class="status-bar">
                    <span>9:41</span>
                    <div>
                        <span>📶</span>
                        <span>📡</span>
                        <span>🔋</span>
                    </div>
                </div>
                <div class="nav-bar">
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                        </svg>
                        <div class="text-lg font-semibold">房间 305</div>
                    </div>
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                        </svg>
                    </div>
                </div>
                <div class="content">
                    <div class="relative h-48">
                        <img src="https://images.unsplash.com/photo-1566665797739-1674de7a421a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="w-full h-full object-cover" alt="酒店房间">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                            <div class="text-white font-bold text-xl">标准双人间</div>
                            <div class="text-white text-sm">房间号: 305 | 楼层: 3</div>
                        </div>
                    </div>
                    
                    <div class="p-4">
                        <div class="flex justify-between items-center mb-4">
                            <div class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-1 rounded">待清扫</div>
                            <div class="text-sm text-red-600 font-medium">优先级: 高</div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                            <div class="font-medium mb-2">房间信息</div>
                            <div class="grid grid-cols-2 gap-2 text-sm">
                                <div class="text-gray-500">客人状态:</div>
                                <div>已退房</div>
                                <div class="text-gray-500">退房时间:</div>
                                <div>今日 08:30</div>
                                <div class="text-gray-500">预计入住:</div>
                                <div>今日 14:00</div>
                                <div class="text-gray-500">特殊要求:</div>
                                <div class="text-red-600">需额外毛巾</div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                            <div class="font-medium mb-3">清扫清单</div>
                            <div class="space-y-2">
                                <div class="flex items-center">
                                    <input type="checkbox" class="w-4 h-4 text-blue-600 rounded mr-2">
                                    <span>更换床单和枕套</span>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" class="w-4 h-4 text-blue-600 rounded mr-2">
                                    <span>清洁浴室</span>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" class="w-4 h-4 text-blue-600 rounded mr-2">
                                    <span>补充洗漱用品</span>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" class="w-4 h-4 text-blue-600 rounded mr-2">
                                    <span>吸尘和拖地</span>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" class="w-4 h-4 text-blue-600 rounded mr-2">
                                    <span>清空垃圾桶</span>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" class="w-4 h-4 text-blue-600 rounded mr-2">
                                    <span>补充额外毛巾</span>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" class="w-4 h-4 text-blue-600 rounded mr-2">
                                    <span>检查迷你吧</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                            <div class="font-medium mb-2">问题报告</div>
                            <textarea placeholder="记录房间问题或损坏情况..." class="w-full p-2 border border-gray-300 rounded-lg text-sm"></textarea>
                            <div class="mt-2 flex">
                                <button class="flex items-center text-blue-600 text-sm">
                                    <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    </svg>
                                    添加照片
                                </button>
                            </div>
                        </div>
                        
                        <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium shadow-lg mb-4">
                            完成清扫
                        </button>
                    </div>
                </div>
                <div class="tab-bar">
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                        <span>首页</span>
                    </div>
                    <div class="tab-item text-blue-600">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
                            <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path>
                        </svg>
                        <span>任务</span>
                    </div>
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                        </svg>
                        <span>消息</span>
                    </div>
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        <span>我的</span>
                    </div>
                </div>
            </div>
            
            <!-- 清扫完成确认页 -->
            <div class="screen bg-white">
                <div class="status-bar">
                    <span>9:41</span>
                    <div>
                        <span>📶</span>
                        <span>📡</span>
                        <span>🔋</span>
                    </div>
                </div>
                <div class="nav-bar">
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                        </svg>
                        <div class="text-lg font-semibold">完成清扫</div>
                    </div>
                    <div></div>
                </div>
                <div class="content p-4">
                    <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-4 rounded-r-lg">
                        <div class="flex">
                            <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <div>
                                <div class="font-medium text-green-700">房间 305 清扫完成</div>
                                <div class="text-sm text-green-600">所有清单项目已完成</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="font-medium mb-3">清扫总结</div>
                        <div class="space-y-2 text-sm">
                            <div class="flex justify-between">
                                <div class="text-gray-600">开始时间:</div>
                                <div>10:15</div>
                            </div>
                            <div class="flex justify-between">
                                <div class="text-gray-600">完成时间:</div>
                                <div>10:45</div>
                            </div>
                            <div class="flex justify-between">
                                <div class="text-gray-600">耗时:</div>
                                <div>30分钟</div>
                            </div>
                            <div class="flex justify-between">
                                <div class="text-gray-600">清单完成率:</div>
                                <div class="text-green-600">100%</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="font-medium mb-3">房间状态</div>
                        <div class="space-y-3">
                            <div class="flex items-center">
                                <input type="checkbox" checked class="w-4 h-4 text-blue-600 rounded mr-2">
                                <span>房间已清洁完毕</span>
                            </div>
                            <div class="flex items-center">
                                <input type="checkbox" checked class="w-4 h-4 text-blue-600 rounded mr-2">
                                <span>所有设备正常工作</span>
                            </div>
                            <div class="flex items-center">
                                <input type="checkbox" checked class="w-4 h-4 text-blue-600 rounded mr-2">
                                <span>所有物品已补充</span>
                            </div>
                            <div class="flex items-center">
                                <input type="checkbox" checked class="w-4 h-4 text-blue-600 rounded mr-2">
                                <span>额外毛巾已添加</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="font-medium mb-3">拍摄房间照片</div>
                        <div class="grid grid-cols-3 gap-2 mb-3">
                            <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
                                <img src="https://images.unsplash.com/photo-1590490360182-c33d57733427?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-full object-cover rounded-lg" alt="房间照片">
                            </div>
                            <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
                                <img src="https://images.unsplash.com/photo-1584622650111-993a426fbf0a?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-full object-cover rounded-lg" alt="浴室照片">
                            </div>
                            <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-300">
                                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="text-sm text-gray-500">
                            请拍摄至少2张照片以证明清扫质量
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="font-medium mb-2">备注</div>
                        <textarea placeholder="添加任何需要注意的事项..." class="w-full p-2 border border-gray-300 rounded-lg text-sm"></textarea>
                    </div>
                    
                    <div class="flex space-x-3 mb-4">
                        <button class="flex-1 bg-white border border-gray-300 text-gray-700 py-3 rounded-lg font-medium">
                            保存草稿
                        </button>
                        <button class="flex-1 bg-blue-600 text-white py-3 rounded-lg font-medium shadow-lg">
                            提交
                        </button>
                    </div>
                </div>
                <div class="tab-bar">
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                        <span>首页</span>
                    </div>
                    <div class="tab-item text-blue-600">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
                            <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path>
                        </svg>
                        <span>任务</span>
                    </div>
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                        </svg>
                        <span>消息</span>
                    </div>
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        <span>我的</span>
                    </div>
                </div>
            </div>
            
            <!-- 质检页面 -->
            <div class="screen bg-white">
                <div class="status-bar">
                    <span>9:41</span>
                    <div>
                        <span>📶</span>
                        <span>📡</span>
                        <span>🔋</span>
                    </div>
                </div>
                <div class="nav-bar">
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                        </svg>
                        <div class="text-lg font-semibold">质量检查</div>
                    </div>
                    <div></div>
                </div>
                <div class="content p-4">
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="flex justify-between items-center mb-3">
                            <div class="font-medium">房间 107</div>
                            <div class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-1 rounded">待检查</div>
                        </div>
                        <div class="text-sm text-gray-500 mb-3">
                            标准双人间 | 清洁员: 张丽 | 完成时间: 08:45
                        </div>
                        <div class="grid grid-cols-3 gap-2 mb-3">
                            <img src="https://images.unsplash.com/photo-1590490360182-c33d57733427?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-20 object-cover rounded-lg" alt="房间照片">
                            <img src="https://images.unsplash.com/photo-1584622650111-993a426fbf0a?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-20 object-cover rounded-lg" alt="浴室照片">
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="font-medium mb-3">检查项目</div>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <input type="checkbox" class="w-4 h-4 text-blue-600 rounded mr-2">
                                    <span>床单整洁无污渍</span>
                                </div>
                                <div class="flex space-x-1">
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <input type="checkbox" class="w-4 h-4 text-blue-600 rounded mr-2">
                                    <span>浴室清洁无水渍</span>
                                </div>
                                <div class="flex space-x-1">
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <input type="checkbox" class="w-4 h-4 text-blue-600 rounded mr-2">
                                    <span>地面干净无灰尘</span>
                                </div>
                                <div class="flex space-x-1">
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <input type="checkbox" class="w-4 h-4 text-blue-600 rounded mr-2">
                                    <span>洗漱用品已补充</span>
                                </div>
                                <div class="flex space-x-1">
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <input type="checkbox" class="w-4 h-4 text-blue-600 rounded mr-2">
                                    <span>垃圾已清理</span>
                                </div>
                                <div class="flex space-x-1">
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="font-medium mb-2">问题记录</div>
                        <textarea placeholder="记录发现的问题..." class="w-full p-2 border border-gray-300 rounded-lg text-sm mb-3"></textarea>
                        <div class="flex items-center">
                            <svg class="w-5 h-5 text-blue-600 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            <span class="text-sm text-blue-600">添加照片</span>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="font-medium mb-3">总体评分</div>
                        <div class="flex justify-center space-x-2 mb-2">
                            <svg class="w-8 h-8 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                            </svg>
                            <svg class="w-8 h-8 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                            </svg>
                            <svg class="w-8 h-8 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                            </svg>
                            <svg class="w-8 h-8 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                            </svg>
                            <svg class="w-8 h-8 text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                            </svg>
                        </div>
                        <div class="text-center text-sm text-gray-500">4.0 / 5.0</div>
                    </div>
                    
                    <div class="flex space-x-3 mb-4">
                        <button class="flex-1 bg-white border border-red-500 text-red-600 py-3 rounded-lg font-medium">
                            需要返工
                        </button>
                        <button class="flex-1 bg-green-600 text-white py-3 rounded-lg font-medium shadow-lg">
                            通过检查
                        </button>
                    </div>
                </div>
                <div class="tab-bar">
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                        <span>首页</span>
                    </div>
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                        </svg>
                        <span>任务</span>
                    </div>
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                        </svg>
                        <span>消息</span>
                    </div>
                    <div class="tab-item text-blue-600">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                        </svg>
                        <span>质检</span>
                    </div>
                </div>
            </div>
            
            <!-- 统计报告页面 -->
            <div class="screen bg-white">
                <div class="status-bar">
                    <span>9:41</span>
                    <div>
                        <span>📶</span>
                        <span>📡</span>
                        <span>🔋</span>
                    </div>
                </div>
                <div class="nav-bar">
                    <div class="text-lg font-semibold">工作统计</div>
                    <div>
                        <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                        </svg>
                    </div>
                </div>
                <div class="content p-4">
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="flex justify-between items-center mb-3">
                            <div class="font-medium">本周绩效</div>
                            <div class="text-sm text-blue-600">查看详情</div>
                        </div>
                        <div class="h-40 bg-gray-100 rounded-lg mb-3 flex items-center justify-center">
                            <!-- 这里应该是一个图表，用简单的占位符代替 -->
                            <div class="text-center">
                                <div class="text-2xl font-bold text-blue-600">92%</div>
                                <div class="text-sm text-gray-500">平均清洁质量评分</div>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-3 text-center">
                            <div class="bg-blue-50 p-2 rounded-lg">
                                <div class="text-lg font-medium text-blue-600">32</div>
                                <div class="text-xs text-gray-500">已完成房间</div>
                            </div>
                            <div class="bg-green-50 p-2 rounded-lg">
                                <div class="text-lg font-medium text-green-600">28</div>
                                <div class="text-xs text-gray-500">通过检查</div>
                            </div>
                            <div class="bg-yellow-50 p-2 rounded-lg">
                                <div class="text-lg font-medium text-yellow-600">4</div>
                                <div class="text-xs text-gray-500">需要返工</div>
                            </div>
                            <div class="bg-purple-50 p-2 rounded-lg">
                                <div class="text-lg font-medium text-purple-600">25分钟</div>
                                <div class="text-xs text-gray-500">平均清扫时间</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="flex justify-between items-center mb-3">
                            <div class="font-medium">质量反馈</div>
                            <div class="text-sm text-blue-600">全部</div>
                        </div>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between p-2 bg-red-50 rounded-lg">
                                <div>
                                    <div class="font-medium">浴室清洁</div>
                                    <div class="text-sm text-gray-500">最常见的问题点</div>
                                </div>
                                <div class="text-red-600 font-medium">12%</div>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-yellow-50 rounded-lg">
                                <div>
                                    <div class="font-medium">床单整理</div>
                                    <div class="text-sm text-gray-500">第二常见问题</div>
                                </div>
                                <div class="text-yellow-600 font-medium">8%</div>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-green-50 rounded-lg">
                                <div>
                                    <div class="font-medium">物品补充</div>
                                    <div class="text-sm text-gray-500">表现最好的项目</div>
                                </div>
                                <div class="text-green-600 font-medium">98%</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="flex justify-between items-center mb-3">
                            <div class="font-medium">团队排名</div>
                            <div class="text-sm text-blue-600">查看全部</div>
                        </div>
                        <div class="space-y-3">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-medium mr-3">1</div>
                                <div class="flex-1">
                                    <div class="font-medium">李明</div>
                                    <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
                                        <div class="bg-blue-600 h-2.5 rounded-full" style="width: 95%"></div>
                                    </div>
                                </div>
                                <div class="font-medium ml-2">95%</div>
                            </div>
                            
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-medium mr-3">2</div>
                                <div class="flex-1">
                                    <div class="font-medium">张丽</div>
                                    <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
                                        <div class="bg-blue-500 h-2.5 rounded-full" style="width: 92%"></div>
                                    </div>
                                </div>
                                <div class="font-medium ml-2">92%</div>
                            </div>
                            
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-blue-400 rounded-full flex items-center justify-center text-white font-medium mr-3">3</div>
                                <div class="flex-1">
                                    <div class="font-medium">王强</div>
                                    <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
                                        <div class="bg-blue-400 h-2.5 rounded-full" style="width: 88%"></div>
                                    </div>
                                </div>
                                <div class="font-medium ml-2">88%</div>
                            </div>
                            
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center text-white font-medium mr-3">4</div>
                                <div class="flex-1">
                                    <div class="font-medium">赵芳</div>
                                    <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
                                        <div class="bg-gray-500 h-2.5 rounded-full" style="width: 85%"></div>
                                    </div>
                                </div>
                                <div class="font-medium ml-2">85%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-bar">
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                        <span>首页</span>
                    </div>
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                        </svg>
                        <span>任务</span>
                    </div>
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                        </svg>
                        <span>消息</span>
                    </div>
                    <div class="tab-item text-blue-600">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
                            <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
                        </svg>
                        <span>统计</span>
                    </div>
                </div>
            </div>
            
            <!-- 个人中心页面 -->
            <div class="screen bg-white">
                <div class="status-bar">
                    <span>9:41</span>
                    <div>
                        <span>📶</span>
                        <span>📡</span>
                        <span>🔋</span>
                    </div>
                </div>
                <div class="nav-bar">
                    <div class="text-lg font-semibold">个人中心</div>
                    <div>
                        <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                    </div>
                </div>
                <div class="content">
                    <div class="bg-blue-600 p-4">
                        <div class="flex items-center">
                            <div class="w-16 h-16 bg-white rounded-full overflow-hidden mr-4">
                                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-full object-cover" alt="用户头像">
                            </div>
                            <div class="text-white">
                                <div class="text-lg font-medium">张丽</div>
                                <div class="text-sm opacity-80">客房清洁员 | ID: 10086</div>
                            </div>
                        </div>
                        <div class="mt-4 grid grid-cols-3 gap-2 text-center">
                            <div class="bg-white bg-opacity-20 rounded-lg p-2">
                                <div class="text-lg font-medium text-white">92%</div>
                                <div class="text-xs text-white text-opacity-80">质量评分</div>
                            </div>
                            <div class="bg-white bg-opacity-20 rounded-lg p-2">
                                <div class="text-lg font-medium text-white">28</div>
                                <div class="text-xs text-white text-opacity-80">本周房间</div>
                            </div>
                            <div class="bg-white bg-opacity-20 rounded-lg p-2">
                                <div class="text-lg font-medium text-white">2</div>
                                <div class="text-xs text-white text-opacity-80">团队排名</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4">
                        <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                            <div class="font-medium mb-3">工作信息</div>
                            <div class="space-y-3">
                                <div class="flex items-center">
                                    <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                    </svg>
                                    <div>
                                        <div class="text-sm text-gray-500">部门</div>
                                        <div>客房清洁部</div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                    </svg>
                                    <div>
                                        <div class="text-sm text-gray-500">主管</div>
                                        <div>王经理</div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                    </svg>
                                    <div>
                                        <div class="text-sm text-gray-500">入职时间</div>
                                        <div>2022-03-15</div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                                    </svg>
                                    <div>
                                        <div class="text-sm text-gray-500">工作状态</div>
                                        <div class="text-green-600">在职</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                            <div class="font-medium mb-3">应用设置</div>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                                        </svg>
                                        <span>消息通知</span>
                                    </div>
                                    <div>
                                        <div class="relative inline-block w-10 mr-2 align-middle select-none">
                                            <input type="checkbox" checked name="toggle" id="toggle1" class="checked:bg-blue-600 outline-none focus:outline-none right-4 checked:right-0 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer">
                                            <label for="toggle1" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                        </svg>
                                        <span>震动提醒</span>
                                    </div>
                                    <div>
                                        <div class="relative inline-block w-10 mr-2 align-middle select-none">
                                            <input type="checkbox" checked name="toggle" id="toggle2" class="checked:bg-blue-600 outline-none focus:outline-none right-4 checked:right-0 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer">
                                            <label for="toggle2" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
                                        </svg>
                                        <span>离线工作模式</span>
                                    </div>
                                    <div>
                                        <div class="relative inline-block w-10 mr-2 align-middle select-none">
                                            <input type="checkbox" name="toggle" id="toggle3" class="checked:bg-blue-600 outline-none focus:outline-none right-4 checked:right-0 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer">
                                            <label for="toggle3" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
                                        </svg>
                                        <span>语言设置</span>
                                    </div>
                                    <div class="flex items-center">
                                        <span class="text-sm text-gray-500 mr-2">中文</span>
                                        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                            <div class="font-medium mb-3">其他</div>
                            <div class="space-y-3">
                                <div class="flex items-center">
                                    <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span>帮助中心</span>
                                </div>
                                
                                <div class="flex items-center">
                                    <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                    </svg>
                                    <span>使用统计</span>
                                </div>
                                
                                <div class="flex items-center">
                                    <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                    </svg>
                                    <span>清洁标准手册</span>
                                </div>
                                
                                <div class="flex items-center">
                                    <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                                    </svg>
                                    <span class="text-red-500">退出登录</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-center text-sm text-gray-500 mb-4">
                            版本 1.0.0 | 酒店客房清扫管理系统
                        </div>
                    </div>
                </div>
                <div class="tab-bar">
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                        <span>首页</span>
                    </div>
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                        </svg>
                        <span>任务</span>
                    </div>
                    <div class="tab-item text-gray-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                        </svg>
                        <span>消息</span>
                    </div>
                    <div class="tab-item text-blue-600">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                        </svg>
                        <span>我的</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>